<template>
	<div class="count">
		<h3>描述：{{description}}</h3>
		<h3>大写的描述：{{daXieMiaoshu}}</h3>
		<h3>当前求和为：{{sum}}</h3>
		<h3>当前求和放大10倍后：{{daHe}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementIfOdd">当前和为奇数+</button>
		<button @click="incrementWait">等一等+</button>
		<button @click="incrementServer">问问服务器加几</button>
		<!-- <button @click="test">测试一下mapState的功能</button> -->
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1 //当前用户选择的数字，可选值有：1、2、3
			}
		},
		methods: {
			//加
			increment(){
				//下面这行代码，绕过了action，通过commit直接去联系mutations中的JIA方法
				this.$store.commit('JIA',this.n)
			},
			//减
			decrement(){
				//下面这行代码，绕过了action，通过commit直接去联系mutations中的JIAN方法
				this.$store.commit('JIAN',this.n)
			},
			//奇数加
			incrementIfOdd(){
				//将判断卸载组件中，符合要求就dispatch，随后触发后续流程
				/* if(this.$store.state.sum % 2){
					this.$store.dispatch('jia',this.n)
				} */
				
				//只要点击了【奇数再+】这个按钮，就立刻dispatch一个jiaOdd，至于判断奇偶数的逻辑是交给对应action的
				this.$store.dispatch('jiaOdd',this.n)

			},
			//等一等加
			incrementWait(){
				this.$store.dispatch('jiaDyd',this.n)
			},
			//问问服务器，得到结果后，再加
			incrementServer(){
				this.$store.dispatch('jiaFuwu')
			},
			/* test(){
				let result = mapState({ 
					miaoshu:'description',
					he:'sum'
				})
				console.log(result)
			} */
		},	
		computed: {

			//靠程序员非常辛苦的去编写：miaoshu、he这两个计算属性（累，重复度太高，这种做法不优秀）
			/* miaoshu(){
				return this.$store.state.description
			},
			he(){
				return this.$store.state.sum
			}, */

			//靠mapState批量去生成一堆计算属性（妙，这种做法优秀！）—— 第一种写法
			// ...mapState({description:'description',sum:'sum'}),

			//靠mapState批量去生成一堆计算属性（妙，这种做法更优秀！）—— 第二种写法
			...mapState(['description','sum']),

			/* ********************************************************* */

			daXieMiaoshu(){
				return this.$store.getters.bigDescription
			},
			daHe(){
				return this.$store.getters.bigSum
			}
		}
	}
</script>

<style>
	.count{
		background-color: skyblue;
		padding: 30px;
	}
	select,button{
		margin-right: 10px;
	}
</style>